<template>
  <div class="account-page page-container">
    <div class="flex-auto overflow-y">
      <div class="full-height full-width no-scroll-x no-scroll-y flex-column">
        <data-list ref="dataList" :dataConfig="dataConfig" :tableData="tableData"></data-list>
      </div>
    </div>
    <add-user ref="addUser" @success="addSuccess"></add-user>
  </div>
</template>

<script>
import DataList from '@/components/business/page-comp/data-list/data-list.vue';
import AddUser from '../components/add-user.vue'
import api from '../api/index.js';
export default {
  name: 'AccountPage',
  components: { DataList, AddUser },
  data() {
    return {
      tableData: {
        data: [],
        total: 0
      },
      dataConfig: {},
    };
  },
  computed: {},
  beforeDestroy() { },
  created() {
    this.dataConfig = {
      search: {
        labelWidth: '100px',
        loading: false,
        form: {
          userName: '',
        },
        conditions: [
          {
            label: '账号',
            prop: 'userName',
            type: 'input',
          },
        ],
        searchCB: this.search,
        topOperates: [
          {
            type: 'button',
            label: '新增账号',
            callback: this.addUser
          }
        ]
      },
      table: {
        config: {
          select: false,
          selectCallback: () => { }
        },
        columns: [
          {
            label: '账号',
            prop: 'userName',
            type: 'text',
          },
          {
            label: '账号角色',
            prop: 'roleName',
            type: 'text',
          },
          {
            label: '账号状态',
            prop: 'status',
            type: 'text',
            callback: (item) => {
              return String(item.status) == '0' ? '启用' : '停用';
            },
          },
          {
            label: '操作',
            prop: 'status',
            type: 'operates',
            fixed: 'right',
            operates: [
              {
                label: (item) => {
                  return String(item.status) === '0' ? '停用' : '启用';
                },
                type: 'link',
                callback: this.updateStatus,
              },
              {
                label: '密码重置',
                type: 'link',
                callback: this.resetPassword,
              },
              {
                label: '删除',
                type: 'link',
                show: (item) => {
                  return String(item.status) === '1';
                },
                callback: this.deleteUser,
              },
            ]
          },
        ],
      }
    };
  },
  mounted() {
    this.$refs['dataList'].search();
  },
  methods: {
    addSuccess() {
      this.$message.success(`新增用户成功`);
      this.$refs['dataList'].search();
    },
    addUser() {
      this.$refs['addUser'].open();
    },
    updateStatus(item) {
      const promptText = String(item.status) === '0' ? '停用' : '启用';
      this.$confirm(`确认${promptText}该用户?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          api.toggleUserStatus({
            userId: item.id
          })
            .then((res) => {
              if (res.success) {
                this.$log.debug(`用户${promptText}成功`);
                this.$message.success(`用户${promptText}成功`);
                item.status = String(item.status) === '0' ? '1' : '0';
              } else {
                this.$log.error(`用户${promptText}失败，错误信息为：`, res.message);
                this.$message.error(`用户${promptText}失败：` + (res.message || ''));
              }
            })
            .catch((e) => {
              this.$log.error(`用户${promptText}失败，错误信息为：`, e);
            });
        }).catch((e) => {
          this.$log.debug(`取消用户${promptText}操作`, e);
        });
    },
    resetPassword(item) {
      this.$confirm(`确认重置该用户密码?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          api.resetPassword({
            userId: item.id
          })
            .then((res) => {
              if (res.success) {
                this.$log.debug(`用户密码重置成功`);
                this.$message.success(`用户密码重置成功`);
              } else {
                this.$log.error(`用户密码重置失败，错误信息为：`, res.message);
                this.$message.error(`用户密码重置失败：` + (res.message || ''));
              }
            })
            .catch((e) => {
              this.$log.error(`用户密码重置失败，错误信息为：`, e);
            });
        }).catch((e) => {
          this.$log.debug(`取消重置用户密码操作`, e);
        });
    },
    deleteUser(item) {
      this.$confirm(`确认删除该用户?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          api.deleteUser({
            userId: item.id
          })
            .then((res) => {
              if (res.success) {
                this.$log.debug(`用户删除成功`);
                this.$message.success(`用户删除成功`);
                this.$refs['dataList'].search();
              } else {
                this.$log.error(`用户删除失败，错误信息为：`, res.message);
                this.$message.error(`用户删除失败：` + (res.message || ''));
              }
            })
            .catch((e) => {
              this.$log.error(`用户删除失败，错误信息为：`, e);
            });
        }).catch((e) => {
          this.$log.debug(`取消删除用户操作`, e);
        });
    },
    search(pageInfo = {}, searchForm = {}) {
      this.dataConfig.search.loading = true;
      let params = {
        ...pageInfo,
        ...searchForm,
      };
      api.queryUserList(params)
        .then((res) => {
          this.dataConfig.search.loading = false;
          if (res.success) {
            this.$log.debug('查询用户列表成功');
            this.tableData = { data: res.data.users, total: res.data.total };
          } else {
            this.$log.error('查询用户列表失败，错误信息为：', res.message);
            this.$message.error('查询用户列表失败：' + (res.message || ''));
          }
        })
        .catch((e) => {
          this.dataConfig.search.loading = false;
          this.$log.error('查询用户列表失败，错误信息为：', e);
        });
    },
  }
};
</script>

<style lang="scss" scoped>
.account-page {}
</style>
